<template>
    <div class="rotate-card-box flex-center">
        <RotateCard
                :text="item.content"
                :image-src="item.url"
                v-for="item in obj.list"
                style=" flex: 1;margin: 30px 20px 30px 20px;"
        >

        </RotateCard>
    </div>
</template>

<script>
    import RotateCard from "@/components/article/RotateCard";
    import {reactive} from "@vue/reactivity";
    export default {
        name: "RotateCarBox",
        components: {RotateCard},
        props:['list'],
        setup(props){
            let obj=reactive({
                list:props.list
                    // {
                    //     imageSrc:"https://pic4.zhimg.com/v2-8e3fa9b65ea6a5808c25afbb5d635d72_r.jpg?source=1940ef5c",
                    //     text:"aaa"
                    // },
                    // {
                    //     imageSrc:'http://localhost:8090/image/-null2e74db92d082410b.jpg',
                    //     text: "bbb"
                    // },
                    // {
                    //     imageSrc:'http://localhost:8090/image/1@86HAI_7(7{9RU}5MRLI.png',
                    //     text: "bbb"
                    // },
                    // {
                    //     imageSrc:'http://localhost:8090/image/D78852BEFA291D81154CE.jpg',
                    //     text: "bbb"
                    // },
                    // {
                    //     imageSrc:'http://localhost:8090/image/-null2e74db92d082410b.jpg',
                    //     text: "bbb"
                    // },
                    // {
                    //     imageSrc:'http://localhost:8090/image/-null2e74db92d082410b.jpg',
                    //     text: "bbb"
                    // },
                    // {
                    //     imageSrc:'http://localhost:8090/image/-null2e74db92d082410b.jpg',
                    //     text: "bbb"
                    // },
                    // {
                    //     imageSrc:'http://localhost:8090/image/-null2e74db92d082410b.jpg',
                    //     text: "bbb"
                    // },
                    // {
                    //     imageSrc:'http://localhost:8090/image/-null2e74db92d082410b.jpg',
                    //     text: "bbb"
                    // },
                    // {
                    //     imageSrc:'http://localhost:8090/image/-null2e74db92d082410b.jpg',
                    //     text: "bbb"
                    // },
                    // {
                    //     imageSrc:'http://localhost:8090/image/-null2e74db92d082410b.jpg',
                    //     text: "bbb"
                    // }
                    // ,
                    // {
                    //     imageSrc:'http://localhost:8090/image/-null2e74db92d082410b.jpg',
                    //     text: "bbb"
                    // }

            })
            return{
                obj
            }
        },
        watch:{
            list(newV){
                this.obj.list=newV
            }
        }
    }
</script>

<style scoped lang="less">
    .rotate-card-box{
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
    }
</style>